<template>
  <div class="index">
    <Swiper />
    <div class="center width">
      <div class="test">
        <div class="left">
          <p class="BigT">
            <img src="../../assets/duo.png" alt="" />{{ title }}
          </p>
          <div class="shadow">
            <div v-for="(item, index) in test" :key="index" class="box">
              <div>模拟</div>
              <div><span>·</span> {{ item.title }}</div>
              <div>考试时间:{{ item.time }}</div>
              <div @click="answer(id)">开始答题</div>
            </div>
          </div>
        </div>
        <div class="right">
          <h1>考<br />试<br />入<br />口</h1>
          <div :class="setIndex == 1 ? 'background' : ''" class="grap" @click="inlet(setIndex)">
            <div :class="setIndex == 0 ? 'seen' : ''">
              {{ prop.titlebefore }}
            </div>
            <div :class="setIndex == 1 ? 'seen' : ''">
              {{ prop.titleafter }}
            </div>
            <p>考试时间{{ prop.time }}</p>
          </div>
        </div>
      </div>
      <Advertising />
    </div>
  </div>
</template>

<script>
import Swiper from "@/components/Swiper.vue";
import * as index from '@/api/index'
import Advertising from "../../components/Advertising.vue";
export default {
  name: "carrousel",
  components: {
    Swiper,
    Advertising,
  },
  data() {
    return {
      setIndex: 0,
      title: "立即考试",
      test: [
        {
          id: 1,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
        {
          id: 2,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
        {
          id: 3,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
        {
          id: 4,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
        {
          id: 5,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
        {
          id: 6,
          title: "Java标题标题标题标题标题标题标题",
          time: "120分钟 ",
        },
      ],
      prop: {
        titlebefore: "考试功能尚未开始",
        titleafter: "点击进入考试页面",
        time: "2021-04-21 11:28:00",
      },

      //     swiperOptions: {
      //       pagination: {
      //         el: '.swiper-pagination'
      //       },
      // Some Swiper option/callback...
      //         }
    };
  },
  mounted() {
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
  },
  methods: {
    answer() {
      this.$router.push("/Kown");
    },
    async getBanner() {
     await index.indexShow()
        .then(res => {
          console.log(res)
        })
    },
    inlet(setIndex) {
      if(setIndex == 1) {
         this.$router.push("/Kown");
      }else {
         this.$message.error("考试功能尚未开始");
      }
     
    }
  },
  created() {
    this.getBanner()
  }
};
</script>
 <style lang="scss" scoped>
.width {
  max-width: 1248px;
  // width: 65%;
  margin: 0 auto;
}
.seen {
  display: block !important;
}
.background {
  background: #0096f6 !important;
}
.index {
  // min-width: 1366px;
  width: 100%;
  margin: 0 auto;
  // background: chartreuse;
  .center {
    .test {
      display: flex;
      justify-content: space-between;
      margin-top: 81px;
      margin-bottom: 40px;
      .left {
        width: 60%;
        // background: #f00;
        .BigT {
          font-size: 30px;
          color: #0096f6;
          img {
            padding-right: 8px;
          }
        }
        .shadow {
            margin-top: 20px;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0px 5px 10px 0px rgba(116, 116, 116, 0.2);
          .box {
            width: 96%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            font-size: 16px;
            height: 56px;
            line-height: 56px;
            padding: 11px 0px;
            border-bottom: 1px solid #ededed;
            // padding: 5px 0px;
            // margin-top: 20px;
            // border-radius: 10px;
            // box-shadow: 0px 5px 10px 0px rgba(116, 116, 116, 0.2);
            div:first-child {
              height: 25px;
              line-height: 25px;
              margin: auto 0px;
              background: #49c8fe;
              color: #fff;
              font-size: 14px;
              padding: 2px 10px;
              border-radius: 10px;
            }
            div:nth-child(2) {
              width: 50%;
              // background: #0096F6;
              color: #666666;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              span {
                font-weight: 700;
              }
            }
            div:nth-child(3) {
              // background: olive;
              width: 18%;
            }
            div:last-child {
              width: 10%;
              // background: orange;
              height: 18px;
              line-height: 18px;
              margin: auto 0px;
              text-align: center;
              color: #6cd998;
              cursor: pointer;
            }
          }
          .box:last-child {
            border-bottom: none;
          }
        }
      }
      .right {
        width: 25%;
        height: 400px;
        margin-top: 30px;
        background: url("../../assets/1(4).png") left top no-repeat, #fff;
        background-size: 100% 94%;
        box-shadow: 0 0 10px #e7e7e7;
        border-radius: 10px;
        position: relative;
        padding-bottom: 100px;
        h1 {
          margin: 0 auto;
          text-align: center;
          margin-top: 130px;
          color: #666666;
        }
        > div {
          width: 70%;
          background: #999999;
          margin: 0 auto;
          color: #fff;
          text-align: center;
          padding: 8px 0px;
          border-radius: 16px;
          position: absolute;
          bottom: 20px;
          left: 15%;
          right: 15%;
          margin: 0 auto;
          cursor: pointer;
          div {
            font-size: 24px;
            display: none;
          }
          p {
            width: 60%;
            line-height: 24px;
            font-size: 14px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>
